import React, { Component } from "react";
import { Form, Input, Button } from "antd";
import logo from "../../assets/images/logo.png";
import "./set_login.less";

class SetLogin extends Component {
  state = {
    //   注册0 忘记密码1 更改密码2 更换手机号3
    loginStatus: 3
  };
  render() {
    let form = this.props.from;
    let { getFieldDecorator } = this.props.form;
    let loginStitle;
    let loginScontent;
    switch (this.state.loginStatus) {
      case 0:
        loginStitle = (
          <>
            <div className="forget-password">注册0</div>
            <div>
              想起密码？
              <span className="immediately-on">立即登陆></span>
            </div>
          </>
        );
        loginScontent = (
          <>
            <Form.Item className="">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-title">订单号：</span>
                  <Input
                    className="input-something"
                    placeholder="请填写支付宝服务市场购买的订单号"
                  />
                </div>
              )}
            </Form.Item>
            <Form.Item className="">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-title">登录账号：</span>
                  <Input
                    className="input-something"
                    placeholder="请输入手机号"
                  />
                </div>
              )}
            </Form.Item>
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-title">请输入验证码：</span>
                  <Input
                    className="input-something regular"
                    placeholder="请输入"
                  />
                  <span className="send-regular">发送验证码</span>
                </div>
              )}
            </Form.Item>
            <Form.Item className="">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-title">密码：</span>
                  <Input className="input-something" placeholder="请输入密码" />
                </div>
              )}
            </Form.Item>
            <Form.Item className="">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-title">确认密码：</span>
                  <Input className="input-something" placeholder="请确认密码" />
                </div>
              )}
            </Form.Item>
            <Form.Item className="">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-title">酒店名称：</span>
                  <Input
                    className="input-something"
                    placeholder="请输入酒店名称"
                  />
                </div>
              )}
            </Form.Item>
            <Form.Item className="modify-btn">
              <Button type="primary" htmlType="submit" className="modify-form">
                提交
              </Button>
            </Form.Item>
          </>
        );
        break;
      case 1:
        loginStitle = (
          <>
            <div className="forget-password">忘记密码1</div>
            <div>
              想起密码？
              <span className="immediately-on">立即登陆></span>
            </div>
          </>
        );
        loginScontent = (
          <>
            {/* 请输入手机号 */}
            <Form.Item className="">
              {getFieldDecorator("use")(
                <div>
                  请输入手机号：
                  <Input className="input-something" placeholder="请输入" />
                </div>
              )}
            </Form.Item>
            {/* 请输入验证码： */}
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  请输入验证码：
                  <Input
                    className="input-something regular"
                    placeholder="请输入"
                  />
                  <span className="send-regular">发送验证码</span>
                </div>
              )}
            </Form.Item>
            {/* 请输入新密码： */}
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  请输入新密码：
                  <Input className="input-something" placeholder="请输入" />
                </div>
              )}
            </Form.Item>
            {/* 确认修改 */}
            <Form.Item className="modify-btn">
              <Button type="primary" htmlType="submit" className="modify-form">
                确认修改
              </Button>
            </Form.Item>
          </>
        );
        break;
      case 2:
        loginStitle = (
          <>
            <div className="forget-password">个人账号设置</div>
            <div>
              +86-156678933456
              <span className="dashes">-</span>
              <span className="immediately-on">退出</span>
            </div>
          </>
        );
        loginScontent = (
          <>
            {/* 请输入旧密码： */}
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  请输入旧密码：
                  <Input className="input-something-other" placeholder="" />
                </div>
              )}
            </Form.Item>
            {/* 请输入新密码： */}
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  请输入新密码：
                  <Input className="input-something-other" placeholder="" />
                </div>
              )}
            </Form.Item>
            {/* 请重复新密码： */}
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  请重复新密码：
                  <Input className="input-something-other" placeholder="" />
                </div>
              )}
            </Form.Item>
            {/* 确认修改 */}
            <Form.Item className="modify-btn back-btn">
              <Button htmlType="submit" className="modify-back">
                返回
              </Button>
              <Button
                type="primary"
                style={{ width: 120 }}
                htmlType="submit"
                className="modify-form"
              >
                确认修改
              </Button>
            </Form.Item>
          </>
        );
        break;
      case 3:
        loginStitle = (
          <>
            <div className="forget-password">更换手机号3</div>
            <div>
              15667893345
              <span className="dashes">-</span>
              <span className="immediately-on">退出</span>
            </div>
          </>
        );
        loginScontent = (
          <>
            {/* 请输入新手机号： */}
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-subtitle">请输入新手机号：</span>
                  <Input className="input-something" placeholder="" />
                </div>
              )}
            </Form.Item>
            {/* 请输入验证码： */}
            <Form.Item className="item">
              {getFieldDecorator("use")(
                <div>
                  <span className="input-subtitle">请输入验证码：</span>
                  <Input
                    className="input-something regular"
                    placeholder="请输入验证码"
                  />
                  <span className="send-regular">发送验证码</span>
                </div>
              )}
            </Form.Item>
            {/* 确认修改 */}
            <Form.Item className="modify-btn back-btn">
              <Button htmlType="submit" className="modify-back">
                返回
              </Button>
              <Button
                type="primary"
                style={{ width: 150 }}
                htmlType="submit"
                className="modify-form"
              >
                确认修改
              </Button>
            </Form.Item>
          </>
        );
        break;
    }

    return (
      <div className="set-login">
        {/* 上表头 */}
        <div className="set-login-head">
          {/* logo和公司名     */}
          <div className="main-title">
            <div>
              <img src={logo} alt="" />
            </div>
            <div className="company">天择</div>
          </div>
          <div className="splite-line"></div>
          {loginStitle}
        </div>
        {/* 下表单 */}
        <div className="set-login-btm">
          <Form style={{ marginLeft: 200 }} onSubmit={""}>
            {loginScontent}
          </Form>
        </div>
      </div>
    );
  }
}
const setLogin = Form.create()(SetLogin);
export default setLogin;
